<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页 index</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/blog.cmn.css">
    <link rel="stylesheet" href="css/message.css">
</head>
<body>
<div id="blogheader"></div>
<article>
    <div id="blogaside"></div>
    <main class="r_box">
        <li v-for="ls in lists">
            <i><a v-bind:href="'detail.html?type=100&id='+ls.id" target="_blank"><img src="images/1.jpg"></a></i>
            <h3><a v-bind:href="'detail.html?type=100&id='+ls.id" target="_blank"><span v-html="ls.title"></span></a>
            </h3>
            <p>{{ls.date}} <span v-html="ls.title"></span> {{ls.author}} 《注》想看更多细节，请点击进入，内容可能过长需要花费几分钟阅读。</p>
        </li>
        <div id="loadmore">
            <input value="0" hidden>
            <a href="javascript:void(0)">加载更多</a>
        </div>
    </main>
</article>
<div id="blogfooter"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hc-sticky.js"></script>
<script type="text/javascript" src="js/blog.cmn.js"></script>
<script type="text/javascript" src="js/countUp.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/message.min.js"></script>
<script type="text/javascript">
    $("#blogheader").load("public/header.html");
    $("#blogaside").load("public/aside.html");
    $("#blogfooter").load("public/footer.html", function () {
        setTimeout(function () {
            var sc = document.createElement("script");
            sc.src = "js/blog.cmn.js";
            $("body").append(sc);
        }, 300)
    });

    var _index = new Vue({
        el: 'main.r_box ',
        data: {
            lists: [],
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                var _title = getUrlParam('title');
                console.log('title:' + _title);
                var _url = null == _title ? 'blog/get/all?size=20&page=0' : 'blog/query/highlight?size=20&page=0&title=' + _title;
                console.log('url:' + _url);
                getListPage(_url);
            }
        }
    });

    $('#loadmore a').on('click', function () {
        var _v = parseInt($('#loadmore input').val()) + 1;
        $('#loadmore input').val(_v);
        console.log(_v);
        // let _kw = document.querySelector('#searchform .input_text').value;
        // console.log(_kw);
        var _title = $('#searchform .input_text').val();
        if (_title == '') {
            _title = getUrlParam('title');
        }
        console.log('title:' + _title);
        var _url = null == _title ? 'blog/get/all?size=20&page=' + _v : 'blog/query/highlight?size=20&page=' + _v + '&title=' + _title;
        console.log('url:' + _url);
        getListPage(_url);
        $(".cd-top").trigger('click');
    });

    function dosearch() {
        var _kw = $('#searchform .input_text').val();
        console.log(_kw);
        if ('' == _kw) {
            return;
        }
        getListPage('blog/query/highlight?size=20&page=0&title=' + _kw);
    }

    function getListPage(url) {
        $.ajax({
            url: url,
            dataType: 'json',
            type: 'get',
            success: function (data) {
                console.log(data);
                if (data.status == 1) {
                    $.message({
                        message: '没有更多信息，别再点了。',
                        type: 'error'
                    });
                }
                _index.lists = data;
            }
        });
    }
</script>
</body>
</html>